<section class="content-header">
  <h1>
    <!-- <a class="icn prev" ng-class="{'mobile':mobile}" ng-click="back()"></a> -->
    {{lang.research}}
  </h1>
  <!-- <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> Home</a></li>
    <li class="active">{{lang.hives}}</li>
  </ol> -->
</section>

<section class="content" >
	
	<div class="alert alert-danger" ng-show="error_msg != null">
        <p>{{ error_msg }}</p>
    </div>
	
	<!-- Settings -->
	<div class="box">
	    <div class="box-header with-border">
	      <h3 class="box-title">{{lang.research}}</h3>
	    </div>

	    <div class="box-body">
			<p>{{ lang.research_explanation }}</p>
			<p>{{ lang.research_info }}</p>
			<p><strong>{{ lang.my_beep_data }}:</strong></p>
			<div class="row" style="margin-bottom: 20px;">
				<div class="col-xs-4">
					<span class=""><i class="fa fa-map-marker"></i> {{lang.locations}}: {{apiaries.length}}</span>
				</div>
				<div class="col-xs-4">
					<span class=""><i class="fa fa-archive"></i> {{lang.hives}}: {{hives.length}}</span>
				</div>
				<div class="col-xs-4">
					<span class=""><i class="fa fa-feed"></i> {{lang.sensors}}: {{sensors.length}}</span>
				</div>
			</div>


			<div ng-if="researches.length > 0" class="row" >

				<div class="col-xs-12 " ng-repeat="(i, r) in researches | orderBy:'name' ">
		    		
			    	<div class="icon-line">
				    	<div>
					    	<div style="display: inline-block; vertical-align: top; margin-top: 10px;">
					    		<a ng-href="{{ r.url != null ? r.url : '#' }}" target="_blank">
					    			<img ng-if="r.thumb_url" class="image-icon" src="{{r.thumb_url}}">
					    		</a>
					    	</div>
					    	<div style="display: inline-block;">
					    		<h2>
						    		{{r.name}}
						    	</h2>
						    	<p>
					    			{{r.description}}
					    		</p>
					    	</div>
					    </div>
				    	<div class="row">
					    	<div class="col-xs-12 col-md-6">
					    		<dl class="dl-horizontal">
					    			
					    			<dt ng-if="r.url != null">{{lang.link}}</dt>
					    			<dd><a ng-href="{{r.url}}" target="_blank">{{r.url}}</a></dd>

					    			<dt ng-if="r.institution != null">{{lang.institution}}</dt>
					    			<dd>{{r.institution}}</dd>
					    			
					    			<dt ng-if="r.checklist_names.length > 0">{{lang.Checklist}}</dt>
					    			<dd><span class="badge" style="margin-right: 5px;" ng-repeat="c in r.checklist_names">{{c}}</span></dd>

					    			<dt ng-if="r.type_of_data_used != null">{{lang.type_of_data_used}}</dt>
					    			<dd>{{r.type_of_data_used}}</dd>

					    			<dt ng-if="r.start_date != null">{{lang.start_date}}</dt>
					    			<dd>{{r.start_date}}</dd>
					    			
					    			<dt ng-if="r.end_date != null">{{lang.end_date}}</dt>
					    			<dd>{{r.end_date}}</dd>
					    			<br>
					    			<dt>
										{{ lang.Current_consent }}
									</dt>
									<dd>
										<strong ng-class="{'text-danger':r.consent===null, 'text-danger':r.consent===0, 'text-success':r.consent===1}">{{ r.consent ? lang.consent_yes : lang.consent_no }}</strong>
									</dd>
									<br>
									<dt>
										{{ lang.edit }} {{ lang.Consent.toLowerCase() }}
									</dt>
									<dd>
										<button ng-click="consentToggle(r.id, r.consent ? 0 : 1)" class="btn btn-primary">{{ r.consent ? lang.consent_no : lang.consent_yes }}</button>
									</dd>
								</dl>
							</div>
							<div class="col-xs-12 col-md-6" ng-if="r.consent_history.length > 0">
								<label>
									{{ lang.Consent }} {{ lang.history }}
								</label>
									
								<dl class="dl-horizontal">
									<div ng-repeat="ch in r.consent_history">
										<dt style="text-align: left;">
											<span ng-if="!ch.edit">
												{{ ch.updated_at }} 
												<a ng-click="editConsentDate(ch); ch.edit=true">
													<i class="fa fa-pencil" title="{{ lang.Consent_can_only_be_set }} {{ ch.consent===1 ? lang.earlier+' '+lang.start_date.toLowerCase() : lang.later+' '+lang.end_date.toLowerCase() }}"></i>
												</a>
											</span>
											<span ng-if="ch.edit">
												<input type="text" data-field="datetime" readonly="true" ng-model="ch.updated_at" style="cursor: pointer; background-color: #DDD; border: 1px solid #999; border-radius: 7px; padding-left: 6px; padding-right: 0;"><a ng-click="updateConsent(r.id, ch.id, ch.updated_at); ch.edit=false"><i class="fa fa-save"></i></a>
											</span>
										</dt>
										<dd>
											<strong ng-class="{'text-danger':ch.consent===null, 'text-danger':ch.consent===0, 'text-success':ch.consent===1}">{{ ch.consent ? lang.consent_yes : lang.consent_no }}</strong>
											<a ng-if="ch.consent===0" ng-click="deleteNoConsent(r.id, ch)" class="delete-no-consent"><i class="fa fa-times"></i></a>
										</dd>
									</div>
								</dl>
									
							</div>
						</div>
					</div>
				</div>
		    </div>
		    <div ng-if="researches.length == 0">
		    	<p>{{lang.no_data}}</p>
		    </div>


		</div>

		<!-- <div class="box-footer">
			
		</div> -->
		
	    <div class="overlay" ng-if="loading">
          <i class="fa fa-refresh fa-spin"></i>
        </div>
	</div>

</section>

<div id="dtBox"></div>

